<template>
    <view class="main">
        <view class="top-header" :class="[$i18n.locale]">
            <text>{{ $t('myWalletPage.totalWallet') }}</text>
            <view class="head-num">{{ $t('unit') }} {{ money }}</view>
            <view class="">{{ $t('myWalletPage.waitingForSettlement') }}：{{ $t('unit') }} {{ user.frozen_money }}</view>
        </view>
        <view class="top-oper flex-row">
            <navigator url="/my/frozen/frozen" hover-class="none" class="con-oper">
                <image src="/static/wallet_icon3.png" class="oper-icon" mode=""></image>
                <text>{{ $t('myWalletPage.recordToBeSettled') }}</text>
            </navigator>
            <navigator v-if="$i18n.locale === 'hk'" url="/my/transfer/transfer" hover-class="none" class="con-oper">
                <image src="/static/wallet_icon2.png" class="oper-icon" mode=""></image>
                <text>{{ $t('myWalletPage.transferMoney') }}</text>
            </navigator>
            <view @click="handleWithdraw" url="/my/withdraw/withdraw" hover-class="none" class="con-oper">
                <image src="/static/wallet_icon1.png" class="oper-icon" mode=""></image>
                <text>{{ $t('myWalletPage.enterIntoAccount') }}</text>
            </view>
            <navigator url="/my/top_up/top_up" hover-class="none" class="con-oper">
                <image src="/static/wallet_icon3.png" class="oper-icon" mode=""></image>
                <text>{{ $t('myWalletPage.entryRecord') }}</text>
            </navigator>
        </view>
        <view class="option">
            <view @tap="to_active(item, index)" v-for="(item, index) in option" :key="index" :class="[item.active ? 'active' : '', $i18n.locale]">{{ item.label }}</view>
        </view>

        <view class="con-li flex-row bdb-1px" v-for="(item, index) in option[option_active].list" :key="index">
            <view class="li-left">
                <view class="left-name">{{ item.desc }}</view>
                <text>{{ item.change_time }}</text>
            </view>
            <view class="li-right">
                <view class="right-num" :style="{ color: item.user_money < 0 ? '#FF4C57' : '#333333' }">{{ item.user_money }}</view>
            </view>
        </view>
        <!-- <no-more v-model="option[option_active].have" v-if="option[option_active].list.length>0" @more="more(option[option_active])"></no-more> -->
        <view v-if="option[option_active].list.length > 0">
            <view v-if="!option[option_active].have" class="no-more">{{ $t('noMoreTips') }}</view>
        </view>
        <no-data v-if="option[option_active].list.length === 0"></no-data>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            money: 0,
            frozen_money: 0,
            resList: [],
            option: [
                {
                    label: this.$t('myWalletPage.option[0]'),
                    value: 'all',
                    active: true,
                    list: [],
                    page: 1,
                    have: true
                },
                {
                    label: this.$t('myWalletPage.option[1]'),
                    value: 'plus',
                    active: false,
                    list: [],
                    page: 1,
                    have: true
                },
                {
                    label: this.$t('myWalletPage.option[2]'),
                    value: 'minus',
                    active: false,
                    list: [],
                    page: 1,
                    have: true
                }
            ],
            option_active: 0
        }
    },
    computed: {
        ...mapState(['user'])
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: this.$t('myWalletPage.navigationBarTitle')
        })
    },
    onShow() {
        this.getResList(this.option[this.option_active], true)
    },
    methods: {
        handleWithdraw() {
            const that = this
            if (this.user.is_attestation === 0) {
                uni.showModal({
                    title: this.$t('showModalTitle'),
                    content: this.$t('myWalletPage.showModalContent'),
                    confirmText: this.$t('myWalletPage.confirmText'),
                    success: function(res) {
                        if (res.confirm) {
                            uni.navigateTo({
                                url: '/my/shiming/shiming'
                            })
                        }
                    }
                })
            } else {
                uni.navigateTo({
                    url: '/my/withdraw/withdraw'
                })
            }
        },
        // 企业提现
        businessWithdraw() {
            uni.navigateTo({
                url: '/my/agent/agent'
            })
        },
        // 个人提现
        personalWithdraw() {
            uni.navigateTo({
                url: '/my/withdraw/withdraw'
            })
        },
        to_active(item, index) {
            this.option.forEach(el => {
                el.active = false
            })
            item.active = true
            item.have = true
            item.page = 1
            this.getResList(item, true)
            this.option_active = index
        },
        getResList(item, bool) {
            this.$http('get|api/User/account_list', {
                type: item.value,
                p: item.page
            }).then(res => {
                this.money = res.result.money
                console.log('get|api/User/account_list', res.result)
                if (res.result.account_log.length === 0) {
                    item.have = false
                    return
                }
                if (bool) {
                    item.list = []
                }
                item.list = [...item.list, ...res.result.account_log]
            })
        },
        more(item) {
            item.page += 1
            this.getResList(item)
        }
    },
    onReachBottom() {
        uni.showLoading({
            title: this.$t('loading')
        })
        this.more(this.option[this.option_active])
    }
}
</script>

<style lang="scss">
page {
    background: #f7f7f7;
    height: 110vh;
}

.top-header {
    position: relative;
    height: 300rpx;
    padding-top: 70rpx;
    font-size: 32rpx;
    // color: #ffe7e7;
    color: #ffffff;
    text-align: center;
    &.zh {
        background: var(--backgroundColor);
        // background: linear-gradient(225deg, rgba(116, 155, 255, 1) 0%, rgba(65, 100, 244, 1) 100%);
    }
    &.hk {
        background: var(--backgroundColorHK);
        // background: linear-gradient(225deg, #02d86d 0%, #00b159 100%);
    }
}

.top-header .head-num {
    font-size: 72rpx;
    color: #ffffff;
    font-weight: bold;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
}

.top-header .head-nav {
    position: absolute;
    top: 30rpx;
    right: 0;
    width: 140rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    border-radius: 104rpx 0 0 104rpx;
    background: rgba(255, 255, 255, 0.2);
    font-size: 24rpx;
    color: #ffffff;
    z-index: 3;
}

.top-oper {
    width: 710rpx;
    height: 164rpx;
    margin: 20rpx auto;
    border-radius: 12rpx;
    background: white;
}

.top-oper .con-oper {
    flex: 1;
    font-size: 26rpx;
    color: #666666;
    text-align: center;
}

.top-oper .con-oper .oper-icon {
    width: 64rpx;
    height: 64rpx;
    margin: 0 auto 4rpx;
    display: block;
}

.page-scroll {
    height: 90rpx;
    white-space: nowrap;
    background: white;
    overflow-y: hidden;
    overflow-x: scroll;
    padding: 0 35rpx;
}

.page-scroll .con-nav {
    position: relative;
    display: inline-block;
    vertical-align: top;
    line-height: 90rpx;
    text-align: center;
    font-size: 30rpx;
    color: #808080;
    margin-right: 80rpx;
}

.page-scroll .con-nav:last-child {
    margin-right: 0;
}

.page-scroll .con-nav.sel-nav {
    color: #ff3c51;
}

.page-scroll .sel-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4rpx;
    background: #ff3c51;
}

.con-li {
    height: 150rpx;
    background: white;
    padding: 0 30rpx;
    font-size: 26rpx;
    color: #999999;
}

.con-li .left-name {
    font-size: 30rpx;
    color: #2e2e2e;
    margin-bottom: 12rpx;
}

.con-li .li-right {
    text-align: right;
}

.con-li .right-num {
    font-size: 36rpx;
    color: #333333;
}

.option {
    display: flex;
    background-color: #ffffff;

    > view {
        flex: 1;
        text-align: center;
        font-size: 30rpx;
        line-height: 90rpx;
        color: #808080;
    }

    .active {
        position: relative;
        &.zh {
            color: var(--theme);
        }
        &.hk {
            color: var(--themeHK);
        }
    }

    .active::after {
        position: absolute;
        content: '';
        width: 64rpx;
        height: 2rpx;
        // background-color: var(--theme);
        bottom: 0;
        left: 50%;
        margin-left: -32rpx;
    }
    .active.zh::after {
        background-color: var(--theme);
    }
    .active.hk::after {
        background-color: var(--themeHK);
    }
}

.no-more {
    color: #999999;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 26rpx;
    background-color: #f7f7f7;
}
</style>
